@tailwind base;

@layer base {
  html {
    @apply bg-pageText text-[10px];
  }

  html,
  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply bg-pageBG text-pageText font-sans leading-100;
  }

  p {
    @apply m-0 text-16 leading-150;
  }

  strong {
    @apply font-semibold;
  }

  ul {
    @apply list-none m-0 p-0;
  }

  /* Headlines */
  h1,
  .is-h1 {
    @apply m-0 text-48 font-normal leading-125;
  }

  h2,
  .is-h2 {
    @apply m-0 text-36 font-normal leading-125;
  }

  h3,
  .is-h3 {
    @apply m-0 text-30 font-normal leading-125;
  }

  h4,
  .is-h4 {
    @apply m-0 text-24 font-normal leading-135;
  }

  h5 {
    @apply m-0 text-20 font-normal leading-125;
  }

  h6 {
    @apply m-0 text-12 font-normal leading-125;
  }

  /* Links */
  a {
    @apply no-underline text-current;
  }

  button {
    @apply clean-btn;
  }

  /* Images */
  figure {
    @apply relative m-0;
  }

  /* Misc. */
  hr {
    @apply my-60 mx-0 border-0 h-1 bg-pageText;
  }
  
  ::-moz-selection {
    @apply bg-pageText text-pageBG;
  }
  ::selection {
    @apply bg-pageText text-pageBG;
  }
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

/* Focus Adjust */
a,
button,
input,
textarea,
select,
details {
  &:focus {
    outline: 1px dashed var(--pageText);
    outline-offset: 2px;

    .is-inverted & {
      outline-color: var(--pageBG);
    }
    
    body:not(.is-tabbing) & {
      outline: none;
    }
  }
}

p {
  &:not(:last-child) {
    @apply mb-24;
  }
}

ul {
  .rc & {
    @apply pl-8 text-16 leading-150;

    &:not(:last-child) {
      @apply mb-6;
    }
    
    li {
      @apply mb-1;
      
      &::before {
        content: "+";
        @apply inline-block relative -ml-4 w-4;
      }
    }
  }
}

h1,
.is-h1 {
  &:not(:last-child) {
    @apply mb-16;
  }

  &.has-btn {
    @apply flex flex-col items-start sm:flex-row sm:items-center;

    .btn {
      @apply mt-4 sm:mt-0 sm:ml-4;
    }
  }

  .hero & {
    font-size: clamp(
      4rem,
      calc(1.5rem + 3.5vw),
      15rem
    )
  }
}

h2,
.is-h2 {
  &:not(:last-child) {
    @apply mb-16;
  }
}

h3,
.is-h3 {
  &:not(:last-child) {
    @apply mb-16;
  }
}

h4,
.is-h4 {
  &:not(:last-child) {
    @apply mb-24;
  }
}

a {
  .rc & {
    &:not(.btn) {
      @apply hover:opacity-40;
      background-image: linear-gradient(var(--pageText), var(--pageText));
      background-position: 0% 100%;
      background-repeat: no-repeat;
      background-size: 100% 1px;
    }
  }
}

figure {
  .rc & {
    &:not(:last-child) {
      @apply mb-24;
    }
  }
}

hr {
  &:last-child {
    @apply mb-0;
  }
}
